サーバー上でのfetch On the server, with fetch
code: app/page.tsx
async function getData() {
// 非同期にfetch
// The return value is *not* serialized
// You can return Date, Map, Set, etc.
if (!res.ok) {
// This will activate the closest error.js Error Boundary
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Page() {
const data = await getData()
return <main></main>
}
q. getDataみたいな、API Clientのラッパーは、別ページで定義してimportしたりもするのかな?
a. 問題ない。
Good to know
? どういうこと?
? どういうこと?
デフォルトではcache: no-storeになっている。
? どういうこと?
感想
hr.icon
#### データのキャッシュ
デフォルト
感想
ビルド時にも取得できるんだ。
q
code:cache.tsx
// 'force-cache' がデフォルト設定なので、省略可能。
// キャッシュされず毎度リクエストされる。
const dynamicData = await fetch(https://..., { cache: 'no-store' })
fetchリクエストがキャッシュされない例外
q: なんで?
q: なんで?
hr.icon
#### Revalidating Data
用途: 変更された情報、最新情報を取得したい時
用途: 変更があまり頻繁でなく、新鮮さがそれほど重要でないデータに利用
用途: できるだけ早く最新のデータを表示したいとき
方法
リソースのキャッシュ寿命(秒単位)を設定
fetch('https://...', { next: { revalidate: 3600 } })
code: layout.js | page.js
export const revalidate = 3600
最も低い時間がすべてのリクエストに使用される。
code:app/page.tsx
export default async function Page() {
// キャッシュエントリをタグ付け
// NOTE: 'collection'はkeyみたいな役割で自由に命名できる感じかな?
const data = await res.json()
// ...
}
code: app/actions.ts
'use server'
import { revalidateTag } from 'next/cache'
export default async function action() {
// そのタグに関連付けられたすべてのエントリを再検証
revalidateTag('collection')
}
感想
利用例イメージは、以下みたいなん?
あるDataリストがあって、あるアイテムを操作しようとする。
そのページでDialogが開かれて、編集できる。
例に対する感想
q:
tagという概念は何だ?
データを再検証しようとしてエラーが発生した場合
次にデータをリクエストする時、Next.jsは再検証を再試行
hr.icon
#### Opting out of Data Caching
? 使用後とは?
? むずい。もう少し、丁寧に説明したい。
個々のfetchリクエストでのキャッシュからのオプトアウト
これにより、リクエストごとにデータを動的に取得
複数のfetchリクエストにおけるオプトアウト
しかし、個々のfetchリクエストごとにキャッシング動作を設定することをおすすめ
これにより、キャッシング動作をより細かく制御できるため。
感想
難しかったら、一旦、まとめてオプトアウトして、ちょっとずつチューニングでも良いと思うな。